<template>
	<view style="width: 100%;height: 100%;">

		<u-image
			v-if="isPreview"
			:lazy-load="true"
			:showLoading="true"
			:src="img"
			:mode="mode"
			:height="height"
			:width="width"
			:radius="radius"
			@click.stop="previewImage(index)"
			:style="{ width, height }"
		>
		
			<view slot="error" style="font-size: 24rpx;width: 100%;height: 100%;" :style="{ borderRadius:radius,backgroundColor:defaultBgColor }"></view>
		</u-image>
		
		<u-image
			v-if="!isPreview"
			:lazy-load="true"
			:showLoading="true"
			:src="img"
			:mode="mode"
			:height="height"
			:radius="radius"
			:width="width"
			:style="{ width, height }"
		>
		
			<view slot="error" style="font-size: 24rpx;width: 100%;height: 100%;" :style="{ borderRadius:radius,backgroundColor:defaultBgColor }"></view>
		</u-image>

	</view>
</template>

<script>
	export default {
		name:"base-image",
		props: {
				isPreview:{
					type:Boolean,
					default:false,
					required: false
				},
		        list: {
		            type: String,
		            default: '',
		            required: false
		        },
				mode: {
				    type: String,
				    default: 'aspectFill',
				    required: false
				},
		        width: {
		            type: String,
		            default: '100%',
		            required: false
		        },
		        height: {
		            type: String,
		            default: '100%',
		            required: false
		        },
		        fontSize: {
		            type: String,
		            default: '30rpx',
		            required: false
		        },
		        radius: {
		            type: String,
		            default: '10rpx',
		            required: false
		        },
				type: {
				    type: String,
				    default: 'url',
				    required: false
				},
				defaultBgColor:{
					type: String,
					default: '#DEEAF7',
					required: false
				}
		    },
			watch: {
			        list: {
			            handler() {
			                const imageList = this.getFileList(this.list);
							console.log('imageList',imageList)
							// console.log('imageList',typeof imageList)
			                if (typeof imageList == 'object' && imageList.length > 0) {
								console.log(111111)
			                    this.img = imageList[0][this.type].startsWith('http')? imageList[0][this.type] : this.$settings.imgBaseURL + imageList[0][this.type];

			                    this.imglist = [];
			                    imageList.forEach(item => {
									
			                        this.imglist.push(item[this.type].startsWith('http')? item[this.type] : this.$settings.imgBaseURL + item[this.type]);
			                    });
			                } else {
								
								this.imglist = [];
								if(typeof imageList == 'string' && imageList){
									this.img =this.list.startsWith('http')? this.list : this.$settings.imgBaseURL +  this.list;
									this.imglist.push(this.img)
								}else{
									this.img = "xxx.jpg"
								}
			                }
			            },
			            immediate: true,
			            deep: true
			        }
			    },
		data() {
			return {
				canShow: ['.jpg', '.jpeg', '.png', '.bmp', '.gif', '.JPG', '.JPEG', '.PNG', 'BMP', '.GIF'],
				imglist: [],
				img: ''
			};
		},
		methods: {
			// 处理附件上传
			getFileList(value) {
				let handleFileValue
				try {
					if(typeof value == "object"){
						
						handleFileValue = value
					}else if(typeof value == "string"){
						handleFileValue = Object.values(JSON.parse(value))
					}
				} catch (e) {
					handleFileValue = value
				}
				return handleFileValue
			},
			previewImage(index = 0) {
				console.log(this.imglist)
				if(this.imglist.length > 0){
					uni.previewImage({
						current: index,
						indicator: 'number',
						loop: true,
						urls: this.imglist
					});
				}
			
			},
			download(url) {
				uni.downloadFile({
					url, //下载地址接口返回
					success: data => {
						if (data.statusCode === 200) {
							//文件保存到本地
							uni.saveFile({
								tempFilePath: data.tempFilePath, //临时路径
								success: function(res) {
									uni.showToast({
										icon: 'none',
										mask: true,
										title: '文件已保存', //保存路径
										duration: 3000
									});
									setTimeout(() => {
										//打开文档查看
										uni.openDocument({
											filePath: res.savedFilePath,
											success: function(res) {
											}
										});
									}, 3000);
								}
							});
						}
					},
					fail: err => {
						uni.showToast({
							icon: 'none',
							mask: true,
							title: '失败请重新下载'
						});
					}
				});
			}
		},
	}
</script>

<style>

</style>